<div class="demo-container">
  <div class="demo-example">
    <div class="demo-title">基本用法</div>
    <div class="demo-text">
      渲染一棵基本树
    </div>
    <d-codebox id="basic" [sourceData]="basicSource">
      <d-basic demo></d-basic>
    </d-codebox>
  </div>
  <div class="demo-example">
    <div class="demo-title">可勾选树</div>
    <div class="demo-text">
      可以进行勾选的树
    </div>
    <d-codebox id="checkable" [sourceData]="checkableSource">
      <d-checkable demo></d-checkable>
    </d-codebox>
  </div>
  <div class="demo-example">
    <div class="demo-title">操作按钮</div>
    <div class="demo-text">
      可定义外部操作按钮、虚浮按钮
    </div>
    <d-codebox id="operateBtn" [sourceData]="operateBtnSource">
      <d-operate-btn demo></d-operate-btn>
    </d-codebox>
  </div>
  <div class="demo-example">
    <div class="demo-title">自定义图标</div>
    <div class="demo-text">
      自定义操作按钮图标、节点图标
    </div>
    <d-codebox id="customize" [sourceData]="customizeSource">
      <d-customize demo></d-customize>
    </d-codebox>
  </div>
  <div class="demo-example">
    <div class="demo-title">可拖拽树</div>
    <div class="demo-text">
        通过OperableTree的 dragglable 属性配置子节点的拖拽功能，并支持外部元素拖拽入树
    </div>
    <d-codebox id="draggable" [sourceData]="draggableSource">
      <d-draggable demo></d-draggable>
    </d-codebox>
  </div>
</div>
